<template>

  <div style="font-size: 14px;">
    <el-header>
      <index-top :name="userName" :is-login="isl" :avatar="avatar"></index-top>
      <div style="margin: 0 200px;height: 50px;line-height: 25px;">
        <div style="display: flex;">
          <el-row>
            <el-col :span="4">
              <img src="@/assets/img/logo.jpeg" style="cursor: pointer;height: 60px">
            </el-col>
            <el-col :span="20">
              <div class="title1" style="margin-top: 30px;margin-left: 20px">医疗器械商城</div>
            </el-col>
          </el-row>

          <div style="flex: 1;text-align: right;margin-top: 20px">
            <el-input placeholder="请输入内容" v-model="searchInfo" style="width: 300px;">
              <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
            </el-input>
          </div>
        </div>
      </div>
      <el-divider content-position="left"></el-divider>
    </el-header>
    <el-main>
      <div style="margin: 50px 200px;">
        <el-carousel indicator-position="outside" :loop="true" :autoplay="true" :interval="2000" height="500px">
          <el-carousel-item v-for="url in imgs" :key="url">
            <el-image
              style="width: 100%;height: 100%;"
              :src="url"
              :fit="fit">
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div style="background-color: #eeeeee;color: gray;">
        <div style="margin: 0 200px;">
          <div style="height: 40px;line-height: 40px;font-weight: bold;font-size: 18px;">推荐商品</div>
          <div style="display: flex;margin-bottom: 20px;" v-for="i in 1">
            <div class="product" v-for="(item,index) in products1" @click="goodsClick(item)"
                 :style="'flex: 1;border: 1px solid #dfdfdf;'+(index>0?'margin-left: 20px;':'')">
              <div style="background-color: #FFFFFF;text-align: center;">
                <div style="margin: 0 20px;">
                  <div>
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="getUrl(item.medImage)"
                      :fit="fit"></el-image>
                  </div>
                  <div style="font-size: 16px;font-weight: 500;height: 30px;overflow: hidden;text-overflow: ellipsis;">
                    {{ item.medName }}
                  </div>
                  <div style="font-size: 12px;height: 50px;overflow: hidden;text-overflow: ellipsis;">
                    {{ item.medInfo }}
                  </div>
                </div>
              </div>
              <div style="height: 40px;line-height: 40px;display: flex;font-size: 12px;">
                <div style="flex:1;color: red;margin-left: 20px;border-right: 1px solid #d6d9e2;font-weight: 600;">
                  ¥{{ item.untitled }}
                  元
                </div>
                <div style="flex:1;display: flex;">
                  <div style="flex: 1;"></div>
                  <div style="display: flex;width: 100px;">
                    <img src="@/assets/img/car.png"
                         style="width: 20px;height: 20px;margin-top: 10px;margin-right: 5px;">
                    <el-button type="text" style="color: gray;">加入购物车</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style="display: flex;margin-bottom: 20px;">
            <div class="product" v-for="(item,index) in products2" @click="goodsClick(item)"
                 :style="'flex: 1;border: 1px solid #dfdfdf;'+(index>0?'margin-left: 20px;':'')">
              <div style="background-color: #FFFFFF;text-align: center;">
                <div style="margin: 0 20px;">
                  <div>
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="getUrl(item.medImage)"
                      :fit="fit"></el-image>
                  </div>
                  <div style="font-size: 16px;font-weight: 500;height: 30px;overflow: hidden;text-overflow: ellipsis;">
                    {{ item.medName }}
                  </div>
                  <div style="font-size: 12px;height: 50px;overflow: hidden;text-overflow: ellipsis;">
                    {{ item.medInfo }}
                  </div>
                </div>
              </div>
              <div style="height: 40px;line-height: 40px;display: flex;font-size: 12px;">
                <div style="flex:1;color: red;margin-left: 20px;border-right: 1px solid #d6d9e2;font-weight: 600;">
                  ¥{{ item.untitled }}
                  元
                </div>
                <div style="flex:1;display: flex;">
                  <div style="flex: 1;"></div>
                  <div style="display: flex;width: 100px;">
                    <img src="@/assets/img/car.png"
                         style="width: 20px;height: 20px;margin-top: 10px;margin-right: 5px;">
                    <el-button type="text" style="color: gray;">加入购物车</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>


    <el-footer>
      <food-info ref="goodsInfo"></food-info>
    </el-footer>
    <!--商品弹窗组件-->

    <!--页尾-->
    <foot></foot>
  </div>

</template>

<script>
import foot from './components/foot'
import indexTop from './components/indexTop'
import foodInfo from "./components/foodInfo/foodInfo";
import {listMedical1, listMedical2} from "../api/system/medical";
import {getToken} from "../utils/auth";
import {isLogin} from "../utils/request";
import {headUrl} from "../utils/common";


export default {

  name: 'index',
  data() {
    return {
      fit: "fit",
      imgs: [
        'https://pic2.zhimg.com/v2-31bd37438d29a5454e2b0877246244dd_1440w.jpg',
        'https://www.yl-designs.com/admin/edit2/attached/image/20190419/20190419145817_52953.jpg',
        'https://ts1.cn.mm.bing.net/th/id/R-C.b2fd24d8186d7ddcd7fab92abb864d96?rik=PNXcDYZXZlg1aA&riu=http%3a%2f%2fwww.szdht.com%2fupfiles%2f202009%2f25%2fa48da626ba6d4541b.jpg&ehk=YRyUkgRcF65DHx8yl4cx7%2bH%2bukY84X91%2blbMTQQ3%2f9w%3d&risl=&pid=ImgRaw&r=0',
      ],
      products1: [],
      products2: [],
      //用户信息
      userName: "",
      avatar:"",
      isl: "",
      isInfo: false,
      searchInfo:"",

    };
  },
  components: {
    foot,
    indexTop,
    foodInfo
  },
  created() {
    this.getProducts1()
    this.getProducts2()
    this.getUserName()
  },
  methods: {
    getUserName() {
      this.userName = this.$store.state.user.name;
      this.avatar = this.$store.state.user.avatar;
      if (getToken()) {
        isLogin.show = true
        this.isl = isLogin.show
      } else {
        this.isl = isLogin.show
        isLogin.show = false
      }
    },
    getProducts1() {
      listMedical1().then(response => {
        this.products1 = response.rows;
      });
    },
    getProducts2() {
      listMedical2().then(response => {
        this.products2 = response.rows;
      });
    },
    goodsClick(item,isl) {
      this.$refs.goodsInfo.open(item,this.isl);
    },

    // getRow () {
    //   let arr = [];
    //   let row = Math.ceil(this.products2.length / 5);
    //   //  行循环
    //   for (let i = 0; i < row; i++) {
    //     //  第i行的商品
    //     arr[i] = [];
    //     // modLast：最后一行的商品个数
    //     let modLast = this.products2.length % 5 === 0 ? 5 : this.products2.length % 5;
    //     // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个
    //     let lastRow = i === (row - 1) ? modLast : 5;
    //     //  列循环
    //     for (let j = 0; j < lastRow; j++) {
    //       arr[i][j] = this.products2[5 * i + j];
    //     }
    //   }
    //   console.log(arr)
    //   //  最后得到arr数组，将数组赋值给一个变量
    //   this.branchData = arr;
    // },
    search(){
      if (this.searchInfo == ""){

      }else {
        this.$router.push({
          path:'/classify/search',
          query: {info: this.searchInfo}
        })
        this.searchInfo = ""
      }
    },
    getUrl(url) {
      return headUrl + url
    }

  }
}
;
</script>

<style>
.product:hover {
  cursor: pointer;
  transform: scale(1.05);
  border-top: 1px solid red !important;
}

.picimg {
  height: 150px;
  weight: 150px;
}
</style>
